﻿@using thousandClear.Areas.Admin.Models;
@model List<AngentModel>
@{
    ViewBag.Title = "新增地区";
    Layout = "~/Areas/Admin/Views/Shared/_Admin.cshtml";
}

<div id="app">
    <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">后台管理</strong> / <small>@ViewBag.Title</small></div>
    </div>

    <div class="am-tabs am-margin" data-am-tabs>

        <div class="am-tabs-bd">
            <form action="" onsubmit="return check()" method="post" class="am-form" id="doc-vld-msg">
                <fieldset>
                    <div class="am-form-group">
                        <label for="typeName">输入地区：</label>
                        <input type="text" id="addressDesc" placeholder="输入地区名字(必填)" required v-model="addressDesc" />
                    </div>
                    <div class="am-form-group">
                        <label>输入地区级别： </label>
                        <label class="am-radio-inline">
                            <input type="radio" v-on:click="ShowLevel1()" value="1" v-model="level" name="level" checked required> 省
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" v-on:click="ShowLevel2()" value="2" v-model="level" name="level"> 市
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" v-on:click="ShowLevel3()" value="3" v-model="level" name="level"> 区
                        </label>
                        <select v-on:change="showLevel2option()" id="level1ID" v-bind:style="{ display: level1,}" required v-model="level1ID">
                            <option value="-1">请选择省</option>
                            @foreach (AngentModel item in Model)
                            {
                                <option value="@item.DATID">@item.datDesc</option>
                            }
                        </select>
                        <select id="level2ID" v-bind:style="{ display: level2,}" required v-model="level2ID">
                            <option value="-1">请选择市</option>
                            @foreach (var item in ViewBag.level2)
                            {
                                <option data-level2ID="@item.datDATID" value="@item.DATID">@item.datDesc</option>
                            }
                        </select>
                    </div>
                    <input type="hidden" name="data" v-bind:value="data" />
                    <button v-bind:click="test()" class="am-btn am-btn-secondary" type="submit">提交</button>

                </fieldset>
            </form>
        </div>
    </div>
</div>

@section Scripts{

    <script>
        var model = new Vue({
            el: '#app',
            data: {
                addressDesc: '',
                level: '',
                level1ID: '-1',
                level2ID: '-1',
                level1: 'none',
                level2: 'none',
            },
            computed: {
                data: function () {
                    return JSON.stringify(this._data);
                }
            },
            methods: {
                ShowLevel1: function () {
                    this.level1 = "none";
                    this.level2 = "none";
                },
                ShowLevel2: function () {
                    this.level1 = "block";
                    this.level2 = "none";
                }
                , ShowLevel3: function () {
                    this.level1 = "block";
                    this.level2 = "block";
                },
                showLevel2option: function () {
                    $("#level2ID option").hide();
                    $("#level2ID option").first().show();
                    $("#level2ID option[data-level2ID=" + this.level1ID + "]").show();
                }

            }

        })
        function check() {

            if ($("input[name='level']:checked").val() == "2" && $("#level1ID").val() == "-1") {
                alert("请选择省");
                return false;
            }
            if ($("input[name='level']:checked").val() == "3") {
                if ($("#level1ID").val() == "-1") {
                    alert("请选择省");
                    return false;
                }
                else if ($("#level2ID").val() == "-1") {
                    alert("请选择市");
                    return false;
                }

            }


        }



        $('.admin-sidebar-Agent').addClass('current');


    </script>
}